<template>
    <div id="product">
         <fieldset>
             <legend>列表渲染</legend>
             <ul>
                <li v-for="item of products" :key="item.id">
                   产品名称:{{item.title}}---产品价格:{{item.price}}---产品库存:{{item.inventory}}---<button @click="handleClick(item)" :disabled="item.inventory===0">添加</button>
                </li>
             </ul>
         </fieldset>
         <fieldset>
             <legend>购物车</legend>
             <el-car></el-car>
         </fieldset>
    </div>
</template>

<script>
import { mapActions, mapState} from 'vuex';
import car from "../shopcar/shopcar.vue"
export default {
   mounted(){
      //在初始化中调用
      this.REQUSETDATE();
   },
   components:{
    "el-car":car
   },
   computed:{
    //展示product.js模块中的products
    ...mapState('product',['products'])
   },
   methods:{
    //对store模块化
    //引入product模块中的js
    //action中的REQUSETDATE方法
     ...mapActions('product',["REQUSETDATE"]),
     //来自于car模块的action
     //此功能为为carts添加内容
     ...mapActions("car",["ADD_SHOP_CAR"]),
     //定义添加功能
     //实现原理
     //调用模块car的action中的ADD_SHOP_CAR
     handleClick(t){
        //传入每次添加商品内容
           this.ADD_SHOP_CAR(t);
     }
   }
}
</script>

<style>

</style>